<template>
  <el-container>
    <el-header style="height: 8vh;width: 100%;
       position: relative;background-color: #0f1827;padding: 0">
      <div class="menuStyle w">
        <el-row :gutter="10">
          <el-col :span="4">
            <img
                src="/img/login/JourneyOfTheStars.png"
                style="width: 130px;height: auto;margin-top: 15px"
                alt="Element logo"/>
          </el-col>
          <el-col :span="8">
            <el-menu
                default-active="/jots"
                mode="horizontal"
                background-color="#0f1827"
                text-color="#fff"
                active-text-color="#ffd04b"
                router
                unique-opened
                style="height: 100%;"
            >
              <el-menu-item index="/jots">首页</el-menu-item>
              <el-menu-item index="/film">电影</el-menu-item>
              <el-menu-item index="/subject">专题</el-menu-item>
              <el-menu-item index="/preview">即将上映</el-menu-item>
            </el-menu>
          </el-col>
          <el-col :span="9">
            <el-select
                filterable
                clearable
                placeholder="请输入内容"
                style="width: 90%;margin-top: 18px;"
            >
              <el-option
                  @click="watchFilmById(item.id)"
                  v-for="item in filmData"
                  :key="item.value"
                  :label="item.filmName"
                  :value="item.id"
              />
              <el-option
                  @click="watchDirector(item.id)"
                  v-for="item in directorData"
                  :key="item.value"
                  :label="item.name"
                  :value="item.id"
              />
            </el-select>
          </el-col>
          <el-col :span="1">
            <el-dropdown trigger="click"
                         style="position: absolute;
                                right: 20px;">
              <!--获取用户头像-->
              <el-avatar :src="avatarUrl"
                         style="width: 40px; height: 40px;margin-top: 18px"/>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="Center">个人中心</el-dropdown-item>
                  <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
    </el-header>
    <el-main style="background-color: #192231;height:92vh">
      <router-view/>
    </el-main>
  </el-container>
</template>

<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router";
import {useStore} from "vuex";

const user = ref(getUser());
const store = useStore();
const userAvatar = computed(() => store.getters.getUserAvatar);
const avatarUrl = computed(() => {
  return BASE_URL + (userAvatar.value ? userAvatar.value : getUser().avatar);
});


const filmData = ref([])
const searchFilm = () => {
  axios.get(BASE_URL + '/v1/film/select/userFilm?')
      .then((response) => {
        if (response.data.code === 2000) {
          filmData.value = response.data.data;
          console.log(filmData);
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
const directorData = ref([]);
const searchDirector = () => {
  axios.get(BASE_URL + '/v1/director/select?')
      .then((response) => {
        if (response.data.code === 2000) {
          directorData.value = response.data.data;
        } else {
          ElMessage({
            message: response.data.msg,
            type: 'error',
            showClose: true,
            center: true,
          });
        }
      });
}
onMounted(() => {
  searchFilm();
  searchDirector();
})
const watchFilmById = (id) => {
  router.push('/details?filmId=' + id)
}
const watchDirector = (id) => {
  router.push('/director?directorId=' + id)
}
const logout = () => {
  ElMessageBox.confirm('是否确认退出登录？', '提示', {
    customClass: 'custom-message-box',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  }).then(() => {
    confirm();
  }).catch(() => {
    // 取消没有操作
  })
}

const confirm = () => {
  localStorage.removeItem('employee');
  router.push("/login");
  user.value = '';
}

const Center = () => {
  let id = user.value.id;
  if (!id) {
    errorInfo('请先登录')
    router.push("/login");
  } else {
    router.push('/center');
  }
}

</script>

<style scoped>
.menuStyle {
  height: 100%;
}

.el-menu--horizontal.el-menu {
  border-bottom: 0;
}
</style>

